<template>
    <div>
        <div class="drawerEditContainer" v-if="propJson.editFlag">
            <div class="innerTitle"><span>抽屉框，仅在配置的时候展示, 可以拖入组件</span></div>
            <div class="innerTitle"><span>{{propJson.title}}</span></div>
            <div style="width: 80%;padding-left: 10%">
                <draggable :list="propJson.innerComponentList"
                           animation="300"
                           :force-fallback="true"
                           :group="{name:'lowcode'}"
                           class="draggableClass"
                           item-key="id"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            <component :is="element.component" :propJson="element.propJson" v-if="itemFlag" :commonParam="commonParam" @click.stop="" @dblclick.stop="changeComponentInfo(element)"/>
                            <component is="CloseCircleOutlined" class="closeClass" @click.stop="" @dblclick.stop="deleteComponent(element)"/>
                        </div>
                    </template>
                </draggable>
            </div>
        </div>

        <div class="drawerContainer" v-if="!propJson.editFlag">
            <el-drawer v-model="drawerVisible" @close="closeDrawer()"
                       :title="propJson.title"
                       :direction="propJson.direction"
                       :size="propJson.width"
                       :show-close="propJson.isShowClose"
                       :modal="propJson.isModal"
                       :open-delay="propJson.openDrawerDelay"
                       :close-delay="propJson.closeDrawerDelay"
                       :close-on-click-modal="propJson.isCloseOnClickModal"
                       :close-on-press-escape="false"
                       :with-header="true"
                       :lock-scroll="true">
                <el-scrollbar>
                    <div style="width: 97%">
                        <component v-for="item in propJson.innerComponentList" :is="item.component" :propJson="item.propJson" :commonParam="commonParam">
                            <template v-slot:[itemSlot.slotName]="slotProps" v-for="itemSlot in slotList">
                                <slot :name="itemSlot.slotName" :slotProps="slotProps"></slot>
                            </template>
                        </component>
                    </div>
                </el-scrollbar>
            </el-drawer>
        </div>
    </div>
</template>

<script name="DrawerComponent" lang="ts" setup>
import {deepCopy} from "@/utils/ywuCommon";
import {commonParamChange, getCommonParamInfo, getCommonParamObj} from "@/utils/commonParamUtil";
import {computed, defineProps, ref} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let itemFlag = ref(true);

let drawerVisible = computed(() => {
    if (propJson.value.editFlag) {
        return false;
    }
    // 获取绑定的字段
    let visibleParam = propJson.value.drawerVisibleParam;
    return getCommonParamInfo(commonParam.value, visibleParam)
})

let slotList = computed(() => {
    let res = getCommonParamObj(commonParam.value, "templateSlotInfo")
    return res.variableValue;
})

function changeComponentInfo(element) {
    let lowCodeStore = useLowCodeStore();
    lowCodeStore.resetCurrentDrawer(element.drawerComponent)
    lowCodeStore.resetCurrentDrawerElementId(element.id);
    lowCodeStore.resetCurrentDrawerTitle(element.title)
    let copyJson = deepCopy(element.propJson)
    lowCodeStore.resetLowCodeDrawerJsonInfo(copyJson);
    lowCodeStore.resetIsShowDrawer(true)
    lowCodeStore.resetLowCodeComponentList(propJson.value.innerComponentList)
}

function deleteComponent(element) {
    let colList = propJson.value.innerComponentList
    // 获取当前列的LIST
    let index = -1;
    // 遍历当前列表，删除元素ID对应的数据
    for (let i = 0; i < colList.length; i++) {
        if (colList[i].id === element.id) {
            index = i;
        }
    }
    if (index >= 0) {
        propJson.value.innerComponentList.splice(index, 1);
    }
}

function closeDrawer() {
    let visibleParam = propJson.value.drawerVisibleParam;
    commonParamChange(commonParam.value, visibleParam, false);
}
</script>

<style scoped lang="less">
.drawerEditContainer {
    //width: 100%;
    border: 1px solid #dcdfe6;
    .innerTitle {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .itemClass {
        position: relative;
        transition: box-shadow 0.3s ease;
        margin-bottom: 0.3%;
        .closeClass {
            display: none;
        }
    }
    .itemClass:hover {
        cursor: pointer;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
        .closeClass {
            position: absolute;
            color: #e76565;
            top: 2px;
            right: 2px;
            display: block;
        }
    }
}
</style>